<template>
    <div class="table">
        <el-table border :data="data.tableData" :fit="true" table-layout="fixed" header-align="center" stripe
            style="width:100%;height: 100%;"
            :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="date" :label="$t('wms.claspData')" />
            <el-table-column prop="name" :label="$t('wms.outputQuantity')" />
            <el-table-column prop="address" :label="$t('wms.materialCode')" />
        </el-table>
    </div>
</template>

<script setup>
import { reactive, ref, watch, onMounted, computed } from 'vue'
import iconFont from '@/components/IconFont/iconFont'

const data = reactive({
  tableData: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ]
})
</script>

<style scoped lang="scss">
.table{
    height: 100%;
    width: 100%;
    overflow: auto;
}
</style>
